import React, { FC, useRef } from 'react'

// const UseRefDemo: FC = () => {
//     const inputRef = useRef<HTMLInputElement>(null)
//     function selectInput() {
//         // inputElem 就是原生的dom节点，可以使用原生DOM对应的所有API
//         const inputElem = inputRef.current
//         if (inputElem) inputElem.select()
//     }
//     return (
//         <>
//             <input ref={inputRef} defaultValue="hello word" />
//             <button onClick={selectInput}>选中input</button>
//         </>
//     )
// }
const UseRefDemo: FC = () => {
    const nameRef = useRef('滕轶男')
    function changeName() {
        // 修改ref值不会触发rerender，useState会触发rerender
        nameRef.current = '诸葛钢镚'
    }
    return (
        <>
            <p>name {nameRef.current}</p>
            <button onClick={changeName}>changeName</button>
        </>
    )
}

export default UseRefDemo
